<!DOCTYPE html>
<html lang="en">
{% if messages %}
    <script>
        {% for message in messages %}
            alert(('{{ message }}'))
        {%endfor %}
    </script>
{% endif %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>美食数据分析可视化</title>

	<!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

	<!-- Styles -->
    <link href="/static/assets/css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/owl.carousel.min.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/owl.theme.default.min.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/weather-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/simdahs.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">


</head>

<body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <div class="nano-content">
                    <style>
                        .newUl li {
                            font-size: 19px;
                        }
                    </style>

                </div>
                <ul class="newUl">
					<li class="label">主页</li>
                    <li class=""><a href="/foodApp/index/"><i class="ti-home"></i> 首页 </a></li>


                    <li><a href="/foodApp/selfInfo/"><i class="ti-user"></i> 个人信息</a></li>



					<li class="label">数据分析</li>
					<li><a href="/foodApp/table/"><i class="ti-layout"></i> 数据总览</a>

                    </li>
					<li><a href="/foodApp/typeChart/"><i class="ti-panel"></i> 类型分析</a>

                    </li>


					<li><a href="/foodApp/priceChart/"><i class="ti-money"></i> 价格分析</a>
                    </li>

					<li><a href="/foodApp/rateChart/"><i class="ti-comment"></i> 评价分析</a>

                    </li>
{#                    <li class="active"><a href="/foodApp/areaChart/"><i class="ti-map"></i> 地区分析</a>#}
{##}
{#                    </li>#}
                    <li><a href="/foodApp/foodCloud/"><i class="ti-cloud"></i> 美食词云图</a>

                    </li>

					<li class="label">预测</li>
					<li class="" ><a href="/foodApp/preChart/"><i class="ti-view-list-alt"></i> 评价预测  </a></li>



                </ul>
            </div>
        </div>
    </div><!-- /# sidebar -->

    <div class="header">
        <div class="pull-left">
            <div class="logo" id="sideLogo">
                <a href="index.html">
{#                    <img class="full-logo" src="/static/assets/images/logo-big.png" alt="SimDahs">#}
{#                    <img class="small-logo" src="/static/assets/images/logo-small.png" alt="SimDahs">#}
                    <span>美食数据分析可视化</span>
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>

        <div class="pull-right p-r-15">
            <ul>
                <li class="header-icon dib"><i class="ti-bell"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Recent Notifications</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Mr. Wolf</div>
                                            <div class="notification-text">5 members joined today </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sofiya</div>
                                            <div class="notification-text">likes a photo of you</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Richard</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-icon dib"><i class="ti-email"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">2 New Messages</span>
                            <a href="email.html"><i class="ti-pencil-alt pull-right"></i></a>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/1.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="/static/assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
				<li class="header-icon dib chat-sidebar-icon"><i class="ti-comment"></i></li>
                <li class="header-icon dib"><img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt="" /> <span class="user-avatar">Wolf <i class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-heading">
                            <span class="text-left">{{ userInfo.username }}</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li><a href="/foodApp/selfInfo/"><i class="ti-user"></i> <span>个人信息</span></a></li>
                                <li><a href="/foodApp/login/"><i class="ti-power-off"></i> <span>退出登录</span></a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

	<div class="chat-sidebar">
        <!-- BEGIN chat -->
        <div id="mmc-chat" class="color-default">
            <!-- BEGIN CHAT BOX -->
            <div class="chat-box">
                <!-- BEGIN CHAT BOXS -->
                <ul class="boxs"></ul>
                <!-- END CHAT BOXS -->
                <div class="icons-set">
                    <div class="stickers">
                        <div class="had-container">
                            <div class="row">
                                <div class="s12">
                                    <ul class="tabs" style="width: 100%;height: 60px;">
                                        <li class="tab col s3">
                                            <a href="#tab1" class="active">
                                                <img src="images/1.png" alt="" />
                                            </a>
                                        </li>
                                        <li class="tab col s3"><a href="#tab2">Test 2</a></li>
                                    </ul>
                                </div>
                                <div id="tab1" class="s12 tab-content">
                                    <ul>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                    </ul>
                                </div>
                                <div id="tab2" class="s12 tab-content">Test 2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CHAT BOX -->
            <!-- BEGIN SIDEBAR -->
            <div id="sidebar" class="right scroll">
                <div class="had-container">
                    <!-- BEGIN USERS -->
                    <div class="users">

                        <ul class="user-list">
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="1" data-status="online" data-username="Rufat Askerov" data-position="left" data-filter-item data-filter-name="rufat askerov">
                                <!-- BEGIN USER IMAGE-->
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Rufat Askerov" />
                                </div>
                                <!-- END USER IMAGE-->
                                <!-- BEGIN USERNAME-->
                                <span class="user-name">Rufat Askerov</span>
								<span class="user-show"></span>
                                <!-- END USERNAME-->
                            </li>
                            <!-- END USER-->
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="3" data-status="online" data-username="Alice" data-position="left" data-filter-item data-filter-name="alice">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Alice" />
                                </div>
                                <span class="user-name">Alice</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Michael Scofield" data-position="left" data-filter-item data-filter-name="michael scofield">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Michael Scofield" />
                                </div>
                                <span class="user-name">Michael Scofield</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="5" data-status="online" data-username="Irina Shayk" data-position="left" data-filter-item data-filter-name="irina shayk">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Irina Shayk" />
                                </div>
                                <span class="user-name">Irina Shayk</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="6" data-status="offline" data-username="Sara Tancredi" data-position="left" data-filter-item data-filter-name="sara tancredi">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Sara Tancredi" />
                                </div>
                                <span class="user-name">Sara Tancredi</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Wolf" data-position="left" data-filter-item data-filter-name="Wolf">
                                <div class="user-image">
                                    <img src="/static/assets/images/avatar/1.jpg" class="avatar" alt="Wolf" />
                                </div>
                                <span class="user-name">Wolf</span>
								<span class="user-show"></span>
                            </li>
                        </ul>
						<div class="chat-user-search">
							<div class="input-group">
								<span class="input-group-addon"><i class="ti-search"></i></span>
								<input type="text" class="form-control" placeholder="Search"  data-search />
							</div>
						</div>
                    </div>
                    <!-- END USERS -->

                </div>
            </div>
            <!-- END SIDEBAR -->
        </div>
        <!-- END chat -->
    </div>
    <!-- END chat Sidebar-->

    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <h1>地区分析</h1>
                            </div>
                        </div>
                    </div><!-- /# column -->
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="#">数据分析</a></li>
                                    <li class="active">地区分析</li>
                                </ol>
                            </div>
                        </div>
                    </div><!-- /# column -->
                </div><!-- /# row -->
                <div class="main-content">
					<div class="row">
						<div class="col-lg-12">
							<div class="card alert">
                                <div class="card-header">
                                    <h4>条件查询</h4>
                                    <div class="card-header-right-icon">
                                        <ul>
                                            <li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
                                            <li class="doc-link"><a href="#"><i class="ti-link"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="horizontal-form">
                                        <form class="form-horizontal" method="POST" action="/foodApp/table/">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">条件选择</label>
                                                <div class="col-sm-2">
                                                    <div class="form-group">
                                                        <select name="num" class="form-control">
                                                            <option>最大值</option>
                                                            <option>最小值</option>
                                                            <option>平均值</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-sm-2">
                                                    <button type="submit" class="btn btn-primary" style="height: 42px">查询</button>
                                                </div>

                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
						</div><!-- /# column -->
                        <div class="col-lg-12">
                            <div class="card alert">
                                <div class="card-header">
                                    <h4>美食数据</h4>
									<div class="card-header-right-icon">
										<ul>
											<li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
											<li class="card-option drop-menu"><i class="ti-settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="link"></i>
												<ul class="card-option-dropdown dropdown-menu">
													<li><a href="#"><i class="ti-loop"></i> Update data</a></li>
													<li><a href="#"><i class="ti-menu-alt"></i> Detail log</a></li>
													<li><a href="#"><i class="ti-pulse"></i> Statistics</a></li>
													<li><a href="#"><i class="ti-power-off"></i> Clear ist</a></li>
												</ul>
											</li>
											<li class="doc-link"><a href="#"><i class="ti-link"></i></a></li>
										</ul>
									</div>
                                </div>
                                <div class="card-body">
                                    <div id="mainA" style="width:100%;height:450px"></div>
                                </div>
                            </div>
                        </div>
                         <div class="col-lg-12">
                            <div class="card alert">
                                <div class="card-header">
                                    <h4>地址热度分析</h4>
									<div class="card-header-right-icon">
										<ul>
											<li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
											<li class="card-option drop-menu"><i class="ti-settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="link"></i>
												<ul class="card-option-dropdown dropdown-menu">
													<li><a href="#"><i class="ti-loop"></i> Update data</a></li>
													<li><a href="#"><i class="ti-menu-alt"></i> Detail log</a></li>
													<li><a href="#"><i class="ti-pulse"></i> Statistics</a></li>
													<li><a href="#"><i class="ti-power-off"></i> Clear ist</a></li>
												</ul>
											</li>
											<li class="doc-link"><a href="#"><i class="ti-link"></i></a></li>
										</ul>
									</div>
                                </div>
                                <div class="card-body">
                                    <div id="mainB" style="width:100%;height:450px"></div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /# row -->
                    </div>

                </div>

            </div><!-- /# container-fluid -->
        </div><!-- /# main -->
    </div><!-- /# content wrap -->


    <script src="/static/assets/js/lib/jquery.min.js"></script><!-- jquery vendor -->
    <script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->
    <script src="/static/assets/js/lib/sidebar.js"></script><!-- sidebar -->
    <script src="/static/assets/js/lib/bootstrap.min.js" rel="stylesheet"></script><!-- bootstrap -->
    <script src="/static/assets/js/lib/mmc-common.js"></script>
    <script src="/static/assets/js/lib/mmc-chat.js"></script>
	<!--  Chart js -->
	<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
	<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
	<!-- // Chart js -->


    <script src="/static/assets/js/lib/sparklinechart/jquery.sparkline.min.js"></script><!-- scripit init-->
    <script src="/static/assets/js/lib/sparklinechart/sparkline.init.js"></script><!-- scripit init-->

	<!--  Datamap -->
    <script src="/static/assets/js/lib/datamap/d3.min.js"></script>
    <script src="/static/assets/js/lib/datamap/topojson.js"></script>
    <script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
    <script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
	<!-- // Datamap -->-->
    <script src="/static/assets/js/lib/weather/jquery.simpleWeather.min.js"></script>
    <script src="/static/assets/js/lib/weather/weather-init.js"></script>
    <script src="/static/assets/js/lib/owl-carousel/owl.carousel.min.js"></script>
    <script src="/static/assets/js/lib/owl-carousel/owl.carousel-init.js"></script>
    <script src="/static/assets/js/scripts.js"></script><!-- scripit init-->
    <script src="/static/assets/js/echarts.js"></script>
    <script src="/static/assets/js/china.js"></script>
    <script>
        var chartDom = document.getElementById('mainA');
            var myChart = echarts.init(chartDom);
            var option;
            var data = {{ mapData | safe }}
            var geoCoordMap = {
              海门: [121.15, 31.89],
              鄂尔多斯: [109.781327, 39.608266],
              招远: [120.38, 37.35],
              舟山: [122.207216, 29.985295],
              齐齐哈尔: [123.97, 47.33],
              盐城: [120.13, 33.38],
              赤峰: [118.87, 42.28],
              青岛: [120.33, 36.07],
              乳山: [121.52, 36.89],
              金昌: [102.188043, 38.520089],
              泉州: [118.58, 24.93],
              莱西: [120.53, 36.86],
              日照: [119.46, 35.42],
              胶南: [119.97, 35.88],
              南通: [121.05, 32.08],
              拉萨: [91.11, 29.97],
              云浮: [112.02, 22.93],
              梅州: [116.1, 24.55],
              文登: [122.05, 37.2],
              上海: [121.48, 31.22],
              攀枝花: [101.718637, 26.582347],
              威海: [122.1, 37.5],
              承德: [117.93, 40.97],
              厦门: [118.1, 24.46],
              汕尾: [115.375279, 22.786211],
              潮州: [116.63, 23.68],
              丹东: [124.37, 40.13],
              太仓: [121.1, 31.45],
              曲靖: [103.79, 25.51],
              烟台: [121.39, 37.52],
              福州: [119.3, 26.08],
              瓦房店: [121.979603, 39.627114],
              即墨: [120.45, 36.38],
              抚顺: [123.97, 41.97],
              玉溪: [102.52, 24.35],
              张家口: [114.87, 40.82],
              阳泉: [113.57, 37.85],
              莱州: [119.942327, 37.177017],
              湖州: [120.1, 30.86],
              汕头: [116.69, 23.39],
              昆山: [120.95, 31.39],
              宁波: [121.56, 29.86],
              湛江: [110.359377, 21.270708],
              揭阳: [116.35, 23.55],
              荣成: [122.41, 37.16],
              连云港: [119.16, 34.59],
              葫芦岛: [120.836932, 40.711052],
              常熟: [120.74, 31.64],
              东莞: [113.75, 23.04],
              河源: [114.68, 23.73],
              淮安: [119.15, 33.5],
              泰州: [119.9, 32.49],
              南宁: [108.33, 22.84],
              营口: [122.18, 40.65],
              惠州: [114.4, 23.09],
              江阴: [120.26, 31.91],
              蓬莱: [120.75, 37.8],
              韶关: [113.62, 24.84],
              嘉峪关: [98.289152, 39.77313],
              广州: [113.23, 23.16],
              延安: [109.47, 36.6],
              太原: [112.53, 37.87],
              清远: [113.01, 23.7],
              中山: [113.38, 22.52],
              昆明: [102.73, 25.04],
              寿光: [118.73, 36.86],
              盘锦: [122.070714, 41.119997],
              长治: [113.08, 36.18],
              深圳: [114.07, 22.62],
              珠海: [113.52, 22.3],
              宿迁: [118.3, 33.96],
              咸阳: [108.72, 34.36],
              铜川: [109.11, 35.09],
              平度: [119.97, 36.77],
              佛山: [113.11, 23.05],
              海口: [110.35, 20.02],
              江门: [113.06, 22.61],
              章丘: [117.53, 36.72],
              肇庆: [112.44, 23.05],
              大连: [121.62, 38.92],
              临汾: [111.5, 36.08],
              吴江: [120.63, 31.16],
              石嘴山: [106.39, 39.04],
              沈阳: [123.38, 41.8],
              苏州: [120.62, 31.32],
              茂名: [110.88, 21.68],
              嘉兴: [120.76, 30.77],
              长春: [125.35, 43.88],
              胶州: [120.03336, 36.264622],
              银川: [106.27, 38.47],
              张家港: [120.555821, 31.875428],
              三门峡: [111.19, 34.76],
              锦州: [121.15, 41.13],
              南昌: [115.89, 28.68],
              柳州: [109.4, 24.33],
              三亚: [109.511909, 18.252847],
              自贡: [104.778442, 29.33903],
              吉林: [126.57, 43.87],
              阳江: [111.95, 21.85],
              泸州: [105.39, 28.91],
              西宁: [101.74, 36.56],
              宜宾: [104.56, 29.77],
              呼和浩特: [111.65, 40.82],
              成都: [104.06, 30.67],
              大同: [113.3, 40.12],
              镇江: [119.44, 32.2],
              桂林: [110.28, 25.29],
              张家界: [110.479191, 29.117096],
              宜兴: [119.82, 31.36],
              北海: [109.12, 21.49],
              西安: [108.95, 34.27],
              金坛: [119.56, 31.74],
              东营: [118.49, 37.46],
              牡丹江: [129.58, 44.6],
              遵义: [106.9, 27.7],
              绍兴: [120.58, 30.01],
              扬州: [119.42, 32.39],
              常州: [119.95, 31.79],
              潍坊: [119.1, 36.62],
              重庆: [106.54, 29.59],
              台州: [121.420757, 28.656386],
              南京: [118.78, 32.04],
              滨州: [118.03, 37.36],
              贵阳: [106.71, 26.57],
              无锡: [120.29, 31.59],
              本溪: [123.73, 41.3],
              克拉玛依: [84.77, 45.59],
              渭南: [109.5, 34.52],
              马鞍山: [118.48, 31.56],
              宝鸡: [107.15, 34.38],
              焦作: [113.21, 35.24],
              句容: [119.16, 31.95],
              北京: [116.46, 39.92],
              徐州: [117.2, 34.26],
              衡水: [115.72, 37.72],
              包头: [110, 40.58],
              绵阳: [104.73, 31.48],
              乌鲁木齐: [87.68, 43.77],
              枣庄: [117.57, 34.86],
              杭州: [120.19, 30.26],
              淄博: [118.05, 36.78],
              鞍山: [122.85, 41.12],
              溧阳: [119.48, 31.43],
              库尔勒: [86.06, 41.68],
              安阳: [114.35, 36.1],
              开封: [114.35, 34.79],
              济南: [117, 36.65],
              德阳: [104.37, 31.13],
              温州: [120.65, 28.01],
              九江: [115.97, 29.71],
              邯郸: [114.47, 36.6],
              临安: [119.72, 30.23],
              兰州: [103.73, 36.03],
              沧州: [116.83, 38.33],
              临沂: [118.35, 35.05],
              南充: [106.110698, 30.837793],
              天津: [117.2, 39.13],
              富阳: [119.95, 30.07],
              泰安: [117.13, 36.18],
              诸暨: [120.23, 29.71],
              郑州: [113.65, 34.76],
              哈尔滨: [126.63, 45.75],
              聊城: [115.97, 36.45],
              芜湖: [118.38, 31.33],
              唐山: [118.02, 39.63],
              平顶山: [113.29, 33.75],
              邢台: [114.48, 37.05],
              德州: [116.29, 37.45],
              济宁: [116.59, 35.38],
              荆州: [112.239741, 30.335165],
              宜昌: [111.3, 30.7],
              义乌: [120.06, 29.32],
              丽水: [119.92, 28.45],
              洛阳: [112.44, 34.7],
              秦皇岛: [119.57, 39.95],
              株洲: [113.16, 27.83],
              石家庄: [114.48, 38.03],
              莱芜: [117.67, 36.19],
              常德: [111.69, 29.05],
              保定: [115.48, 38.85],
              湘潭: [112.91, 27.87],
              金华: [119.64, 29.12],
              岳阳: [113.09, 29.37],
              长沙: [113, 28.21],
              衢州: [118.88, 28.97],
              廊坊: [116.7, 39.53],
              菏泽: [115.480656, 35.23375],
              合肥: [117.27, 31.86],
              武汉: [114.31, 30.52],
              大庆: [125.03, 46.58]
            };
            var convertData = function (data) {
              var res = [];
              for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                  res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                  });
                }
              }
              return res;
            };

            var option = {
                visualMap: {
                    dataRange: {
                        min: 0,
                        max: 100
                    }
                },
                scale: 0.1,
                backgroundColor: "transparent,
                tooltip{
                    trigger: 'item',
                    formatter function(params) {
                        return params.name +':' + params.value[2];
                    }
                },
                title: {
                    text: "省市分布数据",
                    subtext: "价格数据",
                    left: "center",
                    textStyle: {
                        color: "#fff"
                    }
                },
                geo: {
                    show: true,
                    map:"china",
                    zoom: 1.25,
                    label: {
                        normal: {
                            show: true,
                            color: "white",
                            fontSize:"8",
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: "white",
                                fontSize: "10px",
                            },
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: "#eb9c2e",
                            borderColor: "#fff"
                        },
                        emphasis: {
                            areaColor: "#d7b048"
                        },
                    },
                },
                series: [
                    {
                        name: "价格",
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 30;
                        },
                        showEffectOn: "render",
                        rippleEffect: {
                            brushType: "stroke"
                        },
                        hoverAnimation:true,
                        label: {
                            normal: {
                                show: "{b}",
                                position: "right",
                                show: false
                            },
                            itemStyle: {
                                color: "#ddb926",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                }
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
    </script>
    <script>
            var chartDom = document.getElementById('mainB');
                var myChart = echarts.init(chartDom);
                var option;
                var value = {{ yDate | safe}};

                option = {
    title: {
        text: '阶梯数据值',
        x: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    dataRange: {
        show: false,
        min : 0,
        max : 12,
        calculable : true,
        color: ['#d94e5d','#eac736','#50a3ba'],
         y:'center',
    },

    xAxis: [
        {
            type: 'category',
            show: false,
            data: {{ xDate | safe }}
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: false
        }
    ],
    series: [
        {
            name: '街区总热度（评论量）',
            type: 'bar',
            barGap: 0.1,
            barCategoryGap: 0.01,
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}'
                    },
                    shadowBlur: 80,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: value.map(function (a, idx) {
                return [idx, a + 30, idx];
            })
        }
    ]
};
                option && myChart.setOption(option);
        </script>
</body>
</html>